import type { App } from "vue";
// vnode
import { h } from "vue";
import { t } from "@Lang/index.ts"

// 按需导入element-ui 的 notification
import { ElNotification, ElMessageBox } from 'element-plus'
import 'element-plus/es/components/notification/style/css'
import 'element-plus/es/components/message-box/style/css'
// 样式覆盖
import './preset/index.scss'

// options: {
//         desc: "描述",
//         duration: 3000, // 持续时间
//         showClose: true, // 是否自动关闭
//         cancelText: "取消", // 取消按钮文字
//         confirmText: "确定", // 确定按钮文字
//         cancel: function(){}, // 取消的事件
//         confirm: function() {} // 确定的事件
// }

// 错误的提示
const error = (msg: string | number, options: any = {}) => {
        options.icon = "#icon-error";
        return ElNotification(getConfig(msg, options));
}
// 成功的提示
const success = (msg: string | number, options: any = {}) => {
        options.icon = "#icon-success";
        return ElNotification(getConfig(msg, options));
}
// 消息的配置
const getConfig = (msg: string | number, options: any = {}) => {
        return {
                position: options.position || 'top-right',
                showClose: options.showClose == false ? false : true,
                dangerouslyUseHTMLString: true,
                message: () => getMsgBody(msg, options),
                duration: options.duration != null && options.duration != undefined ? options.duration : 3000
        }
}
// 消息内容
const getMsgBody = function (msg: string | number, options: any = {}) {
        return h("div", { class: "flex" }, [
                // 图标
                h("svg", {
                        width: 28,
                        height: 28,
                        class: "svg-icon",
                        fill: "currentColor",
                        "aria-hidden": true,
                        style: {
                                "min-width": "28px"
                        }
                }, h("use", {
                        "xlink:href": options.icon || "#icon-success"
                })),
                // 内容
                h("div", { class: "ml-2" }, [
                        // 标题
                        h("div", {
                                class: "font-[700] text-text--primary text-[14px] leading-[28px]"
                        }, [t(msg)]),
                        // 描述
                        options.desc ? h("div", {
                                class: "text-text--secondary text-[12px] font-[400] leading-[16px]"
                        }, [t(options.desc)]) : '',
                        // 操作
                        (options.confirm && options.confirm == "function") || (options.cancel && options.cancel == "function") ? h("div", {
                                class: "mt-4 flex align-center"
                        }, [
                                options.confirm && options.confirm == "function" ? h("div", {
                                        class: "cursor-pointer bg-primary pl-2 pr-2 h-[24px] text-[12px] font-[700] leading-[12px] flex align-center justify-center rounded-[5px] box-light-shadow",
                                        onClick: options.confirm
                                }, [options.confirmText || t('btn_confirm')]) : '',
                                options.cancel && options.cancel == "function" ? h("div", {
                                        class: "cursor-pointer ml-2 pl-2 pr-2 h-[24px] rounded-[5px] text-text--primary text-[12px] font-[700] leading-[12px] flex align-center justify-center box-light-shadow",
                                        onClick: options.cancel
                                }, [options.cancelText || t('btn_cancel')]) : '',
                        ])
                                : ''])
        ])
}

function confirm(msg: string, title: string = "text_tip", options: any = {}) {
        ElMessageBox.confirm(
                t(msg),
                t(title),
                {
                        confirmButtonText: options.confirmText || t('btn_confirm'),
                        cancelButtonText: options.cancelText || t('btn_cancel'),
                        showCancelButton: options.showCancelButton == false ? false : true,
                        showConfirmButton: options.showConfirmButton == false ? false : true,
                        callback: (action: string) => {
                                if (action == "confirm") {
                                        options.confirm && typeof options.confirm == "function" && options.confirm();
                                }
                                if (action == "cancel") {
                                        options.cancel && typeof options.cancel == "function" && options.cancel();
                                }
                        },
                }
        )
}

export default (app: App) => {
        app.config.globalProperties.$errorMsg = error;
        app.config.globalProperties.$successMsg = success;
        app.config.globalProperties.$confirmAlert = confirm;
}

export const errorMsg = error;
export const successMsg = success;
export const confirmAlert = confirm;